<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理系统--首页</title>
    <link rel="stylesheet" type="text/css" href="../assets/lib/iview/styles/iview.css" />
    <script src="../assets/lib/vue/vue-2.5.17.min.js"></script>
    <script src="../assets/lib/iview/iview.min.js"></script>
    <style type="text/css">
        h2 {
            border-bottom: 1px solid #ddd;
            padding-bottom: 8px;
            margin-bottom: 8px;
            margin-top: 15px;
        }

        h3 {
            padding: 12px 0 8px;
            margin: 8px 0 5px;
        }

        p {
            margin: 12px 0 8px;
            line-height: 20px;
        }
    </style>
</head>

<body style="margin:15px;">
    <div id="app">
        <i-row>
            <i-col span="12">
                <Card>
                    <p slot="title">DncVueSample-后台管理系统</p>
                    <h2>系统简介</h2>
                    <h3>版本信息</h3>
                    <p>
                        DncVueSample当前依赖的组件的版本信息如下：
                    </p>
                    <p>
                        <b style="margin-right:10px;">Vue.js:</b>2.5.17
                        <br />
                        <b style="margin-right:10px;">iview:</b>3.1.0
                    </p>
                    <h3>布局和菜单</h3>
                    <p>
                        该模板以左菜单，右操作面板来布局。左侧菜单树目前支持两级菜单，菜单树以JSON格式定义。其中，菜单项支持指定图标，菜单的链接地址等选项，详细的配置属性如：
                        <br />
                        <code>
                            {
                                title: "用户及授权", name: "1", icon: "logo-apple", menuItem: [
                                    { label: "用户管理", name: "1-1", href: "/account/user/list", icon: "logo-apple" },
                                    { label: "资源管理", name: "1-2", href: "/account/resource/list", icon: "logo-windows" },
                                    { label: "角色管理", name: "1-3", href: "/account/role/list", icon: "logo-tux" }
                                ]
                            }
                    </code>
                    </p>
                    <p>
                        左侧菜单支持收起和展开，当菜处于收起状态时，只显示菜单项的图标，这样使得整个系统的在横向的操作界面空更宽一些，在数据的展示上效果会更好。
                    </p>
                    <h3>选项卡</h3>
                    <p>
                        右侧操作区是以选项卡(iframe)打开的各个操作界面，每个选项卡页面均为一个独立的页面。
                        <br />
                        当点击每个选项卡时，左侧菜单会自动跟踪到当前打开的菜单上。
                        <br />
                        选项卡切换时，支持切换动画效果，视觉体验非常不错。
                    </p>
                    <h3>结束语</h3>
                    <p>
                        DncVueSample是一个极简的基于Vue.js + iview
                        实现的静态后台管理系统模板，她仅是一个后台管理系统模板的雏形UI，不涉及系统功能，但所谓“麻雀虽小五脏俱全”，选择DncVueSample作为后台管理系统的初始模板，可以帮助使用者快速地开始项目的开端UI框架的搭建。
                    </p>
                    <p>
                        <b style="color:#f00;">注：DncVueSample目前没有适配移动端设备和IE10以下古老的浏览器，所以请在PC设备中使用现代浏览器预览和使用。</b>
                    </p>
                    <h3>代码开源</h3>
                    <p>
                        没错，DncVueSample是开源的，你可以使用DncVueSample模板框架做任何的集成或者开发。
                        <br />
                    </p>
                    <p>
                        <b style="margin-right:15px;">源代码托管地址: </b>https://github.com/codedefault/DncVueSample
                    </p>
                </Card>
            </i-col>
            <i-col span="11" style="margin-left: 20px;">
                <Card>
                    <p slot="title">关于DncVueSample</p>
                    <p>
                        <b>VncVueSample</b>由<b>码友网</b>(<a href="https://codedefault.com" target="_blank">https://codedefault.com</a>)发布并提供更新支持。
                    </p>
                    <p>作者:Rector</p>
                    <p style="margin-top:15px;">
                        <b>DncVueSample</b>：是一个基于Vue.js + iview 前端框架搭建的后台管理系统模板，适用于如：OA,CRM,CMS等管理系统的后台开发。
                    </p>
                </Card>
            </i-col>
        </i-row>

    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {}
        });
    </script>
</body>

</html>